

<template>
  <a-row >
    <BhTable
        row-key="column"
        :data="listData"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: 800, minWidth: 900 }"
        :pagination="false"
        :draggable="{ type: 'handle', width: 40 }"
        :disabled-tools="['setting', 'refresh','fullscreen','medium']"
        :disabled-column-keys="['column']"
        @change="handleChangeSort"
    >
      <!-- 操作按钮 -->
      <template #toolbar-left>
        <a-space>
          <a-button type="primary"  @click="openAdd()" >
            <template #icon>
              <icon-plus/>
            </template>
            添加查询条件
          </a-button>
        </a-space>
      </template>
      <template #column="{ record,rowIndex }">
        <a-select
            v-model="record.column"
            :options="columnConfig"
            placeholder="请选择字段列"
            @change="handleChangeSearchColumn($event,rowIndex)"
        />
      </template>
      <template #column_name="{ record }">
        <a-input v-model="record.column_name"  :placeholder="'请输入查询名称'" />
      </template>
      <template #column_query="{ record }">
        <a-input v-model="record.column_query"   :placeholder="'请输入查询字段'"/>
      </template>
      <template #query_type="{ record }">
        <BhSelector
            v-model="record.query_type"
            :placeholder="'请选择查询方式'"
            :source="toOptions('query_type_enum')"
            :option-value="'value'"
            :option-label="'label'"
        ></BhSelector>
      </template>
      <template #form_component="{ record }">
        <BhSelector
            v-model="record.form_component"
            :placeholder="'请选择查询表单组件'"
            :source="toOptions('query_form_type_enum')"
            :option-value="'value'"
            :option-label="'label'"
        ></BhSelector>
      </template>
      <template #dict_code="{ record }">
        <BhSelector
            v-model="record.dict_code"
            :placeholder="'请选择关联字典'"
            :source="dictList"
            :option-value="'code'"
            :option-label="'name'"
        ></BhSelector>
      </template>
      <template #width="{ record }">
        <a-input v-model="record.width" />
      </template>

      <!-- 操作 -->
      <template #handle="{ record ,rowIndex}">
        <!-- 删除 -->
        <a-button
            type="text"
            status="danger"
            @click="deleteRow(rowIndex)"
        >
          删除
        </a-button>

      </template>
    </BhTable>
  </a-row>
</template>

<script setup lang="ts">
import {type FieldConfigResp, type FieldSearchConfigListResp} from "@/api/system/code";
import type {TableInstanceColumns} from '@/components/BhTable'
import {isMobile} from "@/utils";
import {useLoading} from "@/hooks/modules/useLoading";
import {useDictStore} from "@/store";
import {AnyObject} from "@/types/global";
import {DictResp} from "@/api/system/dict";

const props = withDefaults(
    defineProps<
        Partial<{
          list: FieldSearchConfigListResp[] ;
          dataList:FieldConfigResp[]
          columnConfig:AnyObject[],
          dictList: DictResp[]
        }>
    >(),
    {
      dataList: Array as unknown as FieldConfigResp[],
      columnConfig:Array as unknown as AnyObject[]
    }
);
const {loading, setLoading} = useLoading();
const {toOptions} = useDictStore();

const emits = defineEmits(['update:list']);
let listData = computed({
  get() {
    return props.list
  },
  set(e) {
    emits('update:list', e);
  },
});

const columns: TableInstanceColumns[] = [
  {title: '查询列', slotName: 'column', align: 'center',width:200},
  {title: '查询名称', slotName: 'column_name',  align: 'center'},
  {title: '字段命名', slotName: 'column_query', align: 'center'},
  {title: '查询方式', slotName: 'query_type', align: 'center',width:180},
  {title: '表单组件', slotName: 'form_component',  align: 'center',width:180},
  {title: '关联字典', slotName: 'dict_code',align: 'center',width:180},
  {title: '操作', dataIndex: 'handle', slotName: 'handle', align: 'center', fixed: !isMobile() ? 'right' : undefined },
]
const handleChangeSort = (newDataList: FieldSearchConfigListResp[]) => {
  listData.value =newDataList
}

const openAdd= ()=>{
  listData.value.push({
    column:'',
    column_name:'',
    column_query:'',
    query_type:'',
    form_component:'',
    dict_code:''
  } as FieldSearchConfigListResp)

}
const  deleteRow= (index)=>{
  listData.value.splice(index, 1);
}
const  handleChangeSearchColumn=(value,index)=>{

  const node= props.dataList.find(s => s.column_name === value) as unknown as  FieldConfigResp;
  if(Object.entries(node).length > 0 ){
    listData.value[index].column_name=node.column_comment
    listData.value[index].column_query=node.column_name
  }
}
const onValidate =  async() => {
  const  error=ref('');
  for (let s of listData.value) {
    if(s.column == '' ||  s.column_name=='' || s.column_query== '' || s.query_type=='' || s.form_component =='' ){
      error.value=  s.column_name+'选项不能为空'
      break;
    }
  }
  return error.value
}

defineExpose({onValidate})
</script>
<style scoped lang="less">

</style>